/* eslint-disable no-undef */
/* eslint-disable vue/no-parsing-error */
<template>
  <div>
    <el-row class="elrow">
      <el-col :span="10" :offset="3">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="实习招聘" name="first">
            <ul>
              <li v-for=" item in listShixi" :key="item.recruitId">
                <router-link :to="'/business/recruit/data/' + item.recruitId" class="link-type">
                  <span>{{ item.recruitName }}</span>
                </router-link>
                <span class="rightSpan">{{ item.createTime }}</span></li>
            </ul>
            <pagination
              v-show="atotal>0"
              :total="atotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
          <el-tab-pane label="全职招聘" name="second">
            <ul>
              <li v-for=" item in listQanzhi" :key="item.recruitId"><router-link :to="'/business/recruit/data/' + item.recruitId" class="link-type">
                <span>{{ item.recruitName }}</span>
              </router-link> <span class="rightSpan">{{ item.createTime }}</span></li>
            </ul>
            <pagination
              v-show="btotal>0"
              :total="btotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList1"
            />
          </el-tab-pane>
          <el-tab-pane label="宣讲会" name="third">
            <ul>
              <li v-for=" item in lectureList" :key="item.recruitId"><router-link :to="'/business/lecture/data/' + item.lectureId" class="link-type">
                <span>{{ item.lectureName }} </span>
              </router-link><span class="rightSpan">{{ item.createTime }}</span></li>
            </ul>
            <pagination
              v-show="ctotal>0"
              :total="ctotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getLectureList"
            /></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="7" :offset="1">
        <div class="icon"><i class="el-icon-alarm-clock"><span>就业日历</span></i></div>
        <el-calendar>
          <template slot="dateCell" slot-scope="{ data}">
            <el-popover placement="top-start" trigger="hover" :content="getContent(data)" :disabled="goClasss(data)?false:true">
              <p slot="reference" class="data" :class="goClass(data)"> {{ data.day.slice(8) }}</p>
            </el-popover>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listRecruit } from '@/api/zua/recruit'
import { listLecture } from '@/api/zua/lecture'
// import { parseTime } from '@/utils/liuliu'
export default {
  data() {
    return {
      // 总条数
      atotal: 0,
      btotal: 0,
      ctotal: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'recruitId',
        recruitType: 1,
        isAsc: 'desc'
      },
      listQanzhi: [],
      listShixi: [],
      lectureList: {},
      activeName: 'first',
      cellDate: null
    }
  },
  async created() {
    await this.getList()
    await this.getList1()
    await this.getLectureList()
    // console.log(this.listShixi)
    this.lectureList.map(item => {
      item.lectureStarttime = this.parseTime(item.lectureStarttime, '{y}-{m}-{d}')
      // console.log(item.lectureStarttime)
    })
    this.listQanzhi.map(item => {
      //  item.createTime
      item.createTime = this.parseTime(item.createTime, '{y}-{m}-{d}')
    })
    this.listShixi.map(item => {
      //  item.createTime
      item.createTime = this.parseTime(item.createTime, '{y}-{m}-{d}')
    })
  },
  methods: {
    async getLectureList() {
      this.recruitType = null
      this.queryParams.orderByColumn = 'lectureId'
      await listLecture(this.queryParams).then(res => {
        this.lectureList = res.rows
        this.ctotal = res.total
      })
    },
    async getList() {
      this.queryParams.recruitType = 2
      this.queryParams.orderByColumn = 'recruitId'
      // eslint-disable-next-line no-undef
      await listRecruit(this.queryParams).then(res => {
        this.listShixi = res.rows
        this.atotal = res.total
      })
    },
    async getList1() {
      this.queryParams.recruitType = 1
      this.queryParams.orderByColumn = 'recruitId'
      // eslint-disable-next-line no-undef
      await listRecruit(this.queryParams).then(res => {
        this.listQanzhi = res.rows
        this.btotal = res.total
      })
    },
    go(data) {
      // console.log(data.day)
      return data.day
    },
    goClass(data) {
      for (let i = 0; i < this.lectureList.length; i++) {
        if (data.day === this.lectureList[i].lectureStarttime) {
          return 'isSelect'
        }
      }
    },
    goClasss(data) {
      for (let i = 0; i < this.lectureList.length; i++) {
        console.log(this.lectureList[i].lectureStarttime)
        if (data.day === this.lectureList[i].lectureStarttime) {
          return true
        }
      }
    },
    getContent(data) {
      for (let i = 0; i < this.lectureList.length; i++) {
        if (data.day === this.lectureList[i].lectureStarttime) {
          // console.log(this.lectureList[i])
          return this.lectureList[i].lectureName
        }
      }
    },

    moreMessage(activeName) {
      // console.log(activeName)
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    }
  }
}

</script>
<style>
.data{
  /* border: 1px solid red; */
  margin-top: -20px;
}
  .isSelect {
    border-radius: 50%;
    background: red;
    color: white;
  }
.el-calendar-table .el-calendar-day{
  /* color: #409EFF; */
  height: 35px;
  line-height: 20px;
  text-align: center;
  /* border: 1px solid red; */
}
</style>
<style scoped>
.more{
/* border: 1px solid red; */
/* position:fixed; */
/* float: right; */
}

.elrow{
  padding-top: 30px;
  height: 350px;
}
.icon{
  font-size: 15px;
  font-weight: 500;
  height: 41px;
  line-height: 41px;
  border-bottom: 1px solid #E4E7ED;
}
span{
  margin-left: 8px;
}
.rightSpan{
  float: right;
  padding-right: 50px;
}
ul{
  /* border: 1px solid red; */
  height: 340px !important;
  margin-top: 10px;
}
li{
  font-family: 微软雅黑, "Microsoft YaHei";
  font-size: 16px;
  height: 35px;
  line-height: 35px;
  /* border: 1px solid red; */
}
</style>
